<!--
 	* @author  tanyuze
-->
<template>
  <div class="craftsman-update">
    <div class="craftsman-update-title">新建/编辑</div>
    <section v-loading="loading" class="craftsman-update-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="form">
        <!-- <el-form-item label="人物类型" prop="craftsmanType">
          <el-select v-model="craftsmanType" style="width: 100%" @change="handleChange">
            <el-option v-for="item in dict.RWFL" :key="item.dictValue" :value="item.dictValue" :label="item.dictName" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="分类" prop="classifyIdValue">
          <el-cascader
            v-if="showClassify"
            ref="classify"
            v-model="form.classifyIdValue"
            style="width:100%"
            clearable
            :props="createClassifyProps"
            :options="classifyOptions"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name" placeholder="请输入姓名" />
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="MAN">男</el-radio>
            <el-radio label="WOMAN">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--        大师start-->
        <el-form-item label="个人头像（圆）" prop="headImg" class="headerImg">
          <image-upload
            :key="uploadImg.imagecropperKey"
            v-model="form.headImg"
            class="head-portrait"
            :preview-id="uploadImg.headImgId"
            :forever="true"
            :width="120"
            :height="120"
            :view="uploadImg.view"
            :no-circle="false"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadImg.isOss"
            @changeOssPath="(path) =>{uploadImg.headImgId = path}"
          />
        </el-form-item>
        <el-form-item
          v-if="craftsmanType === 'RWFL_JS' || craftsmanType === 'RWFL_DAS'"
          label="个人封面（横版）"
          prop="coverHorizontal"
          :required="craftsmanType == 'RWFL_DAS'"
        >
          <image-upload
            :key="uploadImg.imagecropperKey"
            v-model="form.coverHorizontal"
            class="cover-horizontal"
            :preview-id="uploadImg.coverHorizontalId"
            :forever="true"
            :width="316"
            :height="178"
            :view="uploadImg.view"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadImg.isOss"
            @changeOssPath="(path) =>{uploadImg.coverHorizontalId = path}"
          />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_JS' || craftsmanType === 'RWFL_DAS'" label="个人封面（竖版）" prop="coverVertical">
          <image-upload
            :key="uploadImg.imagecropperKey"
            v-model="form.coverVertical"
            class="cover-vertical"
            :preview-id="uploadImg.coverVerticalId"
            :forever="true"
            :width="316"
            :height="378"
            :view="uploadImg.view"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadImg.isOss"
            @changeOssPath="(path) =>{uploadImg.coverVerticalId = path}"
          />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_DAS'" label="海报（横版）" prop="posterHorizontal">
          <!--          <el-radio-group v-model="horizontalType">
                      <el-radio label="2">自定义上传</el-radio>
                                  <el-radio label="1">使用模板</el-radio>
                    </el-radio-group>
                    <div v-if="horizontalType=== '1'">
                      <el-image :src="uploadImg.view+horizontalImg" class="horizontalImg">
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline" />
                        </div>
                      </el-image>
                    </div>-->
          <image-upload
            v-if="horizontalType === '2'"
            :key="uploadImg.imagecropperKey"
            v-model="form.posterHorizontal"
            class="cover-horizontal"
            :preview-id="uploadImg.posterHorizontalId"
            :forever="true"
            :width="664"
            :height="310"
            :view="uploadImg.view"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadImg.isOss"
            @changeOssPath="(path) =>{uploadImg.posterHorizontalId = path}"
          />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_DAS'" prop="posterHorizontalBigTitle">
          <el-input v-model="form.posterHorizontalBigTitle" placeholder="请输入大标题" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_DAS'" prop="posterHorizontalLittleTitle">
          <el-input v-model="form.posterHorizontalLittleTitle" placeholder="请输入小标题" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_DAS'" label="海报（竖版）" prop="posterVertical">
          <!--          <el-radio-group v-model="verticalType">
                      <el-radio label="2">自定义上传</el-radio>
                      <el-radio label="1">使用模板</el-radio>
                    </el-radio-group>
                   <div v-if="verticalType=== '1'">
                      <el-image :src="uploadImg.view+verticalImg" class="verticalImg">
                        <div slot="error" class="image-slot">
                          <i class="el-icon-picture-outline" />
                        </div>
                      </el-image>
                    </div>-->
          <image-upload
            v-if="verticalType=== '2'"
            :key="uploadImg.imagecropperKey"
            v-model="form.posterVertical"
            class="cover-vertical"
            :preview-id="uploadImg.posterVerticalId"
            :forever="true"
            :width="410"
            :height="660"
            :view="uploadImg.view"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadImg.isOss"
            @changeOssPath="(path) =>{uploadImg.posterVerticalId = path}"
          />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_DAS'" prop="posterVerticalBigTitle">
          <el-input v-model="form.posterVerticalBigTitle" placeholder="请输入大标题" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_DAS'" prop="posterVerticalLittleTitle">
          <el-input v-model="form.posterVerticalLittleTitle" placeholder="请输入小标题" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_DAS'" label="详情" prop="posterInfo">
          <el-input
            v-model="form.posterInfo"
            type="textarea"
            :rows="4"
            placeholder="请输入详情"
          />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_JS' || craftsmanType === 'RWFL_DAS'" label="个人照片" prop="personalPhotos">
          <upload-images ref="images" :key="time" :img-data="form.personalPhotos.split(',')" class="editor-upload-btn" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_JS' || craftsmanType === 'RWFL_DAS'" label="个人视频" prop="personalVideo">
          <div class="selectbtn" @click="uploadFile.showUpload = true">开始上传</div>
          <template>
            <div class="select-data">
              <span
                v-for="(item,index) in uploadFile.videoList"
                :key="index "
                style="margin-right: 10px;color: #eb523c;background-color: #FFFFFF"
              >
                {{ item.fileName }}
                <i class="el-icon-close" @click="clearFile(index,item)" />
              </span>

            </div>
          </template>
          <Upload
            v-if="uploadFile.showUpload"
            ref="upload"
            :accept="uploadFile.accept"
            :limit="1"
            :show-chunks="true"
            :multiple="false"
            :chunk-size="uploadFile.chunksize"
            @close="uploadFile.showUpload = false"
            @success="uploadSuccess"
          >
            <div slot="tip" class="upload-tip">
              <i class="el-icon-info" />
              :
              只能上传视频
            </div>
          </Upload>
        </el-form-item>
        <!--        大师end-->
        <el-form-item v-if="craftsmanType === 'RWFL_LM' || craftsmanType === 'RWFL_GJ'" label="个人封面" prop="cover" required>
          <image-upload
            :key="uploadImg.imagecropperKey"
            v-model="form.cover"
            :preview-id="uploadImg.viewId"
            :forever="true"
            :width="190"
            :view="uploadImg.view"
            :height="220"
            :no-circle="true"
            :no-rotate="false"
            lang-type="zh"
            :is-oss="uploadImg.isOss"
            @changeOssPath="(path) =>{uploadImg.viewId = path}"
          />
        </el-form-item>
        <el-form-item label="简介" prop="synopsis">
          <el-input v-model="form.synopsis" :rows="6" type="textarea" maxlength="1000" show-word-limit />
        </el-form-item>
        <el-form-item :label="craftsmanType === 'RWFL_LM' || craftsmanType === 'RWFL_GJ'?'口号':'语录'" prop="slogan">
          <el-input
            v-model="form.slogan"
            :rows="6"
            type="textarea"
            maxlength="1000"
            show-word-limit
            :placeholder="`请输入${craftsmanType === 'RWFL_LM'?'口号':'语录'}`"
          />
        </el-form-item>
        <!--        大师荣誉-->
        <el-form-item v-if="craftsmanType === 'RWFL_JS' || craftsmanType === 'RWFL_DAS'" label="个人荣誉" prop="personalHonor">
          <tinymce v-if="showtinymce" v-model="form.personalHonor" :is-oss="uploadImg.isOss" :height="300" />
        </el-form-item>

        <el-form-item :label="craftsmanType === 'RWFL_LM' || craftsmanType === 'RWFL_GJ'?'事迹':'履历'" prop="content">
          <tinymce v-if="showtinymce" v-model="form.content" :is-oss="uploadImg.isOss" :height="300" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="出生年月" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            type="month"
            placeholder="选择日期"
            value-format="yyyy-MM"
            style="width:100%;"
          />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="政治面貌" prop="politicCountenance">
          <el-select v-model="form.politicCountenance" style="width: 100%">
            <el-option v-for="item in dict.ZZMM" :key="item.dictValue" :value="item.dictValue" :label="item.dictName" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="所属单位" prop="deptName">
          <el-input v-model="form.deptName" placeholder="请输入所属单位" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="所属行业" prop="profession">
          <el-input v-model="form.profession" placeholder="请输入所属行业" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="所属国籍" prop="nationality">
          <el-input v-model="form.nationality" placeholder="请输入所属国籍" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="籍贯" prop="nativePlace">
          <el-input v-model="form.nativePlace" placeholder="请输入籍贯" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM' || craftsmanType === 'RWFL_GJ'" label="所属地区" prop="regions">
          <el-cascader
            v-if="showArea"
            ref="area"
            v-model="form.regions"
            style="width:100%"
            clearable
            :props="areaProps"
          />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="职务" prop="position">
          <el-input v-model="form.position" placeholder="请输入职务" />
        </el-form-item>
        <el-form-item v-if="craftsmanType !== 'RWFL_GJ'" label="职称" prop="technicalTitle">
          <el-input v-model="form.technicalTitle" placeholder="请输入职称" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="学历" prop="education">
          <el-input v-model="form.education" placeholder="请输入学历" />
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="类型" prop="type">
          <el-radio-group v-model="form.type">
            <el-radio label="RWLX_GR">个人</el-radio>
            <el-radio label="RWLX_ZZ">组织</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="标签:">
          <el-tag
            v-for="tag in form.labels"
            :key="tag"
            closable
            :disable-transitions="false"
            style="margin-right: 5px;margin-bottom:5px;"
            @close="handleCloseTag(tag)"
          >{{ tag }}
          </el-tag>
          <div class="tag-input-container">
            <el-input
              ref="tagInput"
              v-model="tagInputValue"
              class="input-new-tag"
              size="small"
              maxlength="10"
              @keyup.enter.native="handleInputConfirm"
              @blur="handleInputConfirm"
            />
            <span class="tip"><i class="el-icon-info" />输入完成后请回车</span>
          </div>
        </el-form-item>
        <el-form-item v-if="craftsmanType === 'RWFL_LM'" label="特殊状态" prop="specialStatus">
          <el-tag
            v-for="tag in specialStatusList"
            :key="tag"
            closable
            :disable-transitions="false"
            style="margin-right: 5px;margin-bottom:5px;"
            @close="handleCloseTagts(tag)"
          >{{ tag }}
          </el-tag>
          <div class="tag-input-container">
            <el-input
              ref="tagInput"
              v-model="specialStatusValue"
              class="input-new-tag"
              size="small"
              maxlength="10"
              @keyup.enter.native="handleInputConfirmts"
              @blur="handleInputConfirmts"
            />
            <span class="tip"><i class="el-icon-info" />输入完成后请回车</span>
          </div>

          <!-- <el-input v-model="form.specialStatus" placeholder="请输入特殊状态" /> -->
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model.number="form.sort" placeholder="请输入排序号（值越大，越靠前）" />
        </el-form-item>

      </el-form>
    </section>
    <section class="craftsman-update-footer">
      <el-button style="padding: 10px 30px" @click="handleCancel()">取 消</el-button>
      <el-button type="primary" @click="onSubmint('form')">确 定</el-button>
    </section>
  </div>
</template>

<script>
import Upload from '@/components/upload'
import ImageUpload from '@/components/ImageUpload'
import UploadImages from './../components/UploadImages'
import {
  getClassifyTree,
  update,
  get,
  getAreaTree,
  insert,
  getDictByCode
} from '../api/index'
import Tinymce from '@/components/Tinymce'

export default {
  name: 'CraftsmanManage',
  components: { ImageUpload, Tinymce, UploadImages, Upload },
  data() {
    return {
      loading: false,
      showArea: false,
      showClassify: false,
      showtinymce: false,
      areaProps: {
        label: 'regionName',
        value: 'id',
        checkStrictly: true,
        lazy: true,
        lazyLoad(node, resolve) {
          getAreaTree({ parentId: (node.data && node.data.id) || -1 }).then(res => {
            if (res.data.data.length > 0 && res.data.data[0].ptrees.split(',').length !== 4) {
              res.data.data.forEach(item => {
                item['leaf'] = false
              })
            } else {
              res.data.data.forEach(item => {
                item['leaf'] = true
              })
            }
            resolve(res.data.data)
          }).catch(() => {
            resolve([])
          })
        }
      },

      horizontalType: '2', // 海报横版类型：模板，自定义
      horizontalImg: '2210262e828ea3ba10458d8ecb9dcdc428876f.png',
      verticalType: '2', // 海报竖版类型：模板，自定义
      verticalImg: '221026f33f059e734d4932a368c91dccdfaf8d.png',

      craftsmanType: '',
      form: {
        id: '',
        name: '',
        sex: '',
        regions: [],
        cover: '',
        slogan: '', // 口号
        synopsis: '', // 简介
        labels: [], // 标签
        classifyIdValue: '', // 分类
        content: '', // 事迹
        birthday: '',
        politicCountenance: '', // 政治面貌
        deptName: '', // 所属单位
        profession: '', // 所属行业
        nationality: '中国', // 国籍
        specialStatus: '',
        position: '', // 职务
        technicalTitle: '', // 职称
        nativePlace: '', // 籍贯
        education: '', // 学历
        type: '', // 类型
        sort: '',

        // 大师
        headImg: '', // 头像
        coverHorizontal: '', // 封面横版
        coverVertical: '', // 封面竖版
        posterHorizontal: '', // 海报横版
        posterHorizontalBigTitle: '', // 横板大标题
        posterHorizontalLittleTitle: '', // 横板小标题
        posterVertical: '', // 海拔竖版
        posterVerticalBigTitle: '', // 竖版大标题
        posterVerticalLittleTitle: '', // 竖版小标题
        posterInfo: '', // 竖版海报详情
        personalPhotos: '', // 个人照片
        personalVideo: '', // 个人视频
        personalHonor: '' // 荣誉
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 1, max: 200, message: '长度在 1 到 200 个字符', trigger: 'blur' }
        ],
        headImg: [{ required: true, message: '请上传人物头像（圆）', trigger: 'blur' }],
        coverHorizontal: [{ message: '请上传个人封面（横板）', trigger: 'blur' }],
        cover: [{ required: true, message: '请上传人物封面', trigger: 'change' }],
        synopsis: [{ required: true, message: '请输入简介', trigger: 'blur' }],
        classifyIdValue: [{ required: true, message: '请选择分类', trigger: 'change' }],
        content: [{ required: false, message: '请输入履历/事迹', trigger: 'blur' }]
      },
      uploadImg: {
        headImgId: '',
        coverHorizontalId: '',
        coverVerticalId: '',
        posterHorizontalId: '',
        posterVerticalId: '',
        viewId: '',
        view: '/API-DOCUMENT/document/file/download?id=',
        imagecropperKey: new Date().getTime(),
        isOss: sessionStorage.getItem('FILE_SAVE_THIRD_CONFIG') || false
      },
      tagInputValue: '',
      specialStatusValue: '',
      specialStatusList: [],
      createClassifyProps: {
        label: 'classifyName',
        value: 'id',
        checkStrictly: true,
        emitPath: false
      },
      classifyOptions: [],
      dict: {
        ZZMM: [{ dictValue: 'DY', dicName: '党员' }],
        RWFL: []
      },
      type: '',
      time: new Date().getTime(),
      uploadFile: {
        showUpload: false,
        accept: 'video/*',
        chunksize: 10 * 1024 * 1024,
        file: '',
        fileName: [],
        oldfile: '',
        videoList: []
      }
    }
  },
  watch: {
    craftsmanType(val) {
      this.getClassifyOption(val)
    }
  },
  created() {
    // this.getClassifyOption()
    for (const key in this.dict) {
      this.getDict(key)
    }
    if (this.$route.query.type === 'c') {
      this.type = 'create'
      this.craftsmanType = this.$route.query.t
      this.$nextTick(() => {
        this.showArea = true
        this.showClassify = true
        this.showtinymce = true
      })
    } else if (this.$route.query.type === 'u') {
      this.type = 'update'
      if (!this.$route.query.i) {
        this.$message({
          showClose: true,
          message: '参数异常！',
          type: 'warning',
          onClose: () => {
            this.handleCancel()
          }
        })
      }
      this.getData(this.$route.query.i)
    }
  },
  methods: {
    clearFile(index, item) {
      return this.uploadFile.videoList.splice(index, 1)
    },
    uploadSuccess(id, files) {
      if (id) {
        const obj = {}
        obj.fileName = files[0].name
        obj.id = id
        this.uploadFile.videoList.push(obj)
        this.uploadFile.showUpload = false
      }
    },
    /**
     * 确认课程标签输入框内容
     */
    handleInputConfirm() {
      const inputValue = this.tagInputValue.trim().replace(/,|，/g, '')
      if (inputValue) {
        this.form.labels.push(inputValue)
      }
      this.tagInputValue = ''
    },
    /**
     * 删除标签
     */
    handleCloseTag(tag) {
      this.form.labels.splice(this.form.labels.indexOf(tag), 1)
    },
    /**
     * 确认特殊状态输入框内容
     */
    handleInputConfirmts() {
      const inputValue = this.specialStatusValue.trim().replace(/,|，/g, '')
      if (inputValue) {
        this.specialStatusList.push(inputValue)
      }
      this.specialStatusValue = ''
    },
    /**
     * 删除标签
     */
    handleCloseTagts(tag) {
      this.specialStatusList.splice(this.specialStatusList.indexOf(tag), 1)
    },
    handleCancel() {
      this.$router.back()
    },
    /**
     * 根编辑回显
     */
    getData(id) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.3)'
      })
      return new Promise((resolve, reject) => {
        get({ id: id }).then(res => {
          loading.close()
          const data = res.data.data
          for (const key in this.form) {
            this.form[key] = data[key]
          }
          this.form.labels = data['labelsValue'] && data['labelsValue'].split(',')
          this.form.regions = []

          if (data['areaProvince']) {
            this.form.regions.push(data['areaProvince'])
          }
          if (data['areaCity']) {
            this.form.regions.push(data['areaCity'])
          }
          if (data['areaCounty']) {
            this.form.regions.push(data['areaCounty'])
          }
          if (data['craftsmanType']) {
            this.craftsmanType = data['craftsmanType']
          }
          if (data['personalVideo']) {
            this.uploadFile.videoList = JSON.parse(data['personalVideo'])
          }
          if (data['personalPhotos']) {
            this.form.personalPhotos = data['personalPhotos']
            this.time = new Date().getTime()
          } else {
            this.form.personalPhotos = ''
          }
          if (data['headImgURL']) {
            this.uploadImg.headImgId = data.headImgURL
          }
          if (data['coverHorizontalURL']) {
            this.uploadImg.coverHorizontalId = data.coverHorizontalURL
          }
          if (data['coverVerticalURL']) {
            this.uploadImg.coverVerticalId = data.coverVerticalURL
          }
          if (data['posterHorizontalURL']) {
            this.uploadImg.posterHorizontalId = data.posterHorizontalURL
          }
          if (data['posterVerticalURL']) {
            this.uploadImg.posterVerticalId = data.posterVerticalURL
          }
          if (data['coverUrl']) {
            this.uploadImg.viewId = data.coverUrl
          }
          this.form.specialStatus = data.specialStatusValue
          this.specialStatusList = data.specialStatus || []
          this.form.personalHonor = data.personalHonor
          this.form.content = data.content
          if (!Array.isArray(this.form.labels)) {
            this.form.labels = []
          }
          if (!Array.isArray(this.specialStatusList)) {
            this.specialStatusList = []
          }

          this.$nextTick(() => {
            this.showtinymce = true
            this.showArea = true
            this.showClassify = true
          })
        }).catch(error => {
          console.log(error, 223)
          loading.close()
          reject(error)
        })
      })
    },
    handleChange() {
      for (const key in this.form) {
        if (key === 'regions') {
          this.form[key] = []
        } else if (key === 'labels') {
          this.form[key] = []
        } else if (key === 'id') {
          this.form[key] = this.$route.query.i
        } else {
          this.form[key] = ''
        }
        this.uploadFile.videoList = []
      }
      this.specialStatusList = []
      this.uploadImg.viewId = ''
      this.uploadImg.headImgId = ''
      this.uploadImg.coverHorizontalId = ''
      this.uploadImg.posterHorizontalId = ''
      this.uploadImg.posterVerticalId = ''
      this.uploadImg.coverVerticalId = ''
    },
    /**
     * 获取分类
     */
    getClassifyOption(type) {
      const loading = this.$loading({
        lock: true,
        text: '请稍后',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      return new Promise((resolve, reject) => {
        getClassifyTree({ classifyType: type }).then(({ data }) => {
          loading.close()
          this.classifyOptions = data.data || []
          resolve()
        }).catch(error => {
          loading.close()
          reject(error)
        })
      })
    },
    /**
     * 提交
     */
    onSubmint() {
      console.log(this.craftsmanType, this.form.coverHorizontal)
      if (this.craftsmanType === 'RWFL_DAS' && this.horizontalType === '1') {
        this.form.posterHorizontal = this.horizontalImg
      }
      if (this.craftsmanType === 'RWFL_DAS' && this.verticalType === '1') {
        this.form.posterVertical = this.verticalImg
      }
      if (this.craftsmanType === 'RWFL_DAS' && !this.form.coverHorizontal) {
        this.$message.error({
          message: '请上传个人封面(横板)',
          type: 'success',
          duration: 2000
        })
        return
      }
      if (this.$refs.images) {
        const images = this.$refs.images.list
        if (images && images.length > 0) {
          this.form.personalPhotos = images.join(',')
        }
      }
      if (this.uploadFile.videoList && this.uploadFile.videoList.length > 0) {
        this.form.personalVideo = JSON.stringify(this.uploadFile.videoList)
      }
      this.$refs['form'].validate((valid) => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '请稍后',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.3)'
          })
          const params = Object.assign({}, this.form)
          params['craftsmanType'] = this.craftsmanType
          params['labelsValue'] = this.form.labels.join(',')
          params['areaProvince'] = this.form.regions[0] || ''
          params['areaCity'] = this.form.regions[1] || ''
          params['areaCounty'] = this.form.regions[2] || ''
          params['classifyIdValue'] = this.form.classifyIdValue
          params['specialStatusValue'] = this.specialStatusList.join(',')
          delete params.regions
          delete params.labels
          if (this.type === 'create') {
            return new Promise(resolve => {
              insert(params).then(() => {
                this.dialogVisible = false
                loading.close()
                this.$message({
                  title: '成功',
                  message: '创建成功',
                  type: 'success',
                  duration: 2000
                })
                this.handleCancel()
              }).catch(err => {
                loading.close(err)
              })
            })
          } else {
            return new Promise((resolve, reject) => {
              update(params).then(() => {
                this.dialogVisible = false
                loading.close()
                this.$message({
                  title: '成功',
                  message: '操作成功',
                  type: 'success',
                  duration: 2000
                })
                this.handleCancel()
              }).catch(error => {
                reject(error)
                loading.close()
              })
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    /**
     * 获取字典
     */
    getDict(code) {
      return new Promise((resolve, reject) => {
        getDictByCode(code).then(response => {
          this.dict[code] = (response.data.data && response.data.data.length > 0) ? response.data.data[0].list : []
        }).catch(error => {
          reject(error)
        })
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
@import '@/styles/mixin.scss';

.craftsman-update {
  background-color: #fff;
  min-height: calc(100vh - 60px);
  max-height: calc(100vh - 60px);
  overflow: hidden;

  .craftsman-update-title {
    position: relative;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    font-family: PingFangSC-Medium;
    font-weight: bold;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;

    &:before {
      content: '';
      position: absolute;
      width: 2px;
      @include bg-color($mainColor);
      top: 13px;
      bottom: 13px;
      left: 15px;
    }
  }

  .craftsman-update-main {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 52px;
    box-sizing: border-box;
    padding: 0 10px;
    overflow: auto;

    &::-webkit-scrollbar {
      width: 8px; /*对垂直流动条有效*/
      height: 1px; /*对水平流动条有效*/
    }

    /** 滚动条轨道*/
    &::-webkit-scrollbar-track {
      box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
      background-color: white;
      border-radius: 3px;
    }

    /** 滚动条里面小方块*/
    &::-webkit-scrollbar-thumb {
      height: 32px;
      border-radius: 5px;
      box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.1);
      background-color: #eaeaea;
    }

    .form {
      width: 1000px !important;
      margin: 0 auto;

      .el-select {
        width: 100%;
      }

      .head-portrait {
        .custom-uploader {
          width: 150px;
          height: 150px;
          border-radius: 50%;

          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 50%;

            .image-slot {
              width: 100%;
              height: 100%;
              border-radius: 50%;

              .icon-wrap {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
        }
      }

      .cover-horizontal {
        .custom-uploader {
          width: 250px;
          height: 150px;

          .el-image {
            width: 100%;
            height: 100%;

            .image-slot {
              width: 100%;
              height: 100%;

              .icon-wrap {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

      .cover-vertical {
        .custom-uploader {
          width: 150px;
          height: 250px;

          .el-image {
            width: 100%;
            height: 100%;

            .image-slot {
              width: 100%;
              height: 100%;

              .icon-wrap {
                width: 100%;
                height: 100%;
              }
            }
          }
        }
      }

      .horizontalImg {
        width: 250px;
        height: 159px;

        .image-slot {
          width: 100%;
          height: 100%;
        }

      }

      .verticalImg {
        width: 158px;
        height: 289px;

        .image-slot {
          width: 100%;
          height: 100%;
        }
      }

      .selectbtn {
        display: inline-block;
        width: 120px;
        background: rgba(255, 255, 255, 1);
        @include border-color(1px, dotted, $mainColor);
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        @include font-color($mainColor);
        text-align: center;
        cursor: pointer;
      }

      .headerImg {
        margin-bottom: 33px;
        .el-form-item__content {
          .el-form-item__error {
            margin-top: 15px;
          }
        }
      }
    }

    .select-data {
      display: inline-block;
      background: rgba(246, 246, 246, 1);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      padding: 0 10px;
      margin-right: 5px;
      margin-bottom: 8px;

      i {
        cursor: pointer;
        padding-left: 5px;
      }
    }

    .selectbtn {
      display: inline-block;
      width: 120px;
      background: rgba(255, 255, 255, 1);
      @include border-color(1px, dotted, $mainColor);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      @include font-color($mainColor);
      text-align: center;
      cursor: pointer;
      margin-bottom: 10px;
    }

    .tag-input-container {
      width: 100%;

      .input-new-tag {
        width: 80%;
        margin-top: 6px;
      }
    }

    .tip {
      font-size: 14px;
      color: $mainColor;
      margin-bottom: 10px;
    }
  }

  .craftsman-update-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }

  .custom-uploader .size-tip {
    margin: 0;
    position: absolute;
    bottom: -30px;
    left: 0;
    min-width: 150px;
    text-align: left;
    z-index: 1;
    line-height: 1.1;
    color: #999;
    font-size: 12px;
  }

  .size-tip {
    width: 200px;
  }
}
</style>
